<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable">
    <title>canvas</title>
    <style>
        body{
            padding:0;
            margin:0;
        }
        canvas{
            background:#eee;
            padding:0;
        }
        div{
            color: #000;
            background: #ddd;
            font-size: 16px;
        }
         p{
            position: absolute;
            left:420px; top: 50px;
            padding: 10px 30px;
            color: white;
            font-size: 20px;
            font-family: "Microsoft Yahei";
            
        }
        #canvas{
            cursor: pointer;
            background:#000;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script src='../js/ball.js'></script>
    <script src="../js/arrow.js"></script>
    <script src='../js/utils.js'></script>
    <script>
        window.onload = function(){
            var canvas = document.getElementById("canvas");
            var context = canvas.getContext('2d');
            var oP = document.getElementById('record');

            var mouse = utils.captureMouse(canvas); //捕获鼠标位置

            canvas.width = document.body.clientWidth;
            canvas.height = window.screen.availHeight*0.8;
            
            var ball = new Ball(30, "orange"),
              easing = 0.05,  //设置缓动参数
              targetX = canvas.width/2,//设定目标位置
              targetY = 200; //设定目标位置
              ball.y = canvas.height/2;
              ball.y = 0;
              
              var ball2 = new Ball(10,"red");
              ball2.x = ball.x-60;
              ball2.y = ball.y-60;


             var ball3 = new Ball(),
             spring = 0.03,  //弹性系数
             targetX2 = canvas.width / 2,  //目标位置
             f = 0.95,
             vx3 = 0; 

            var ball5 = new Ball(20,"blue"),
          spring = 0.03, //弹性系数
          friction = 0.95, //摩擦力
          vx5 = 0,
          vy5 = 0;


             ball3.y = canvas.height / 2;

               (function drawFrame(){
                window.requestAnimationFrame(drawFrame, canvas);
                context.clearRect(0, 0, canvas.width, canvas.height);

//                 var stopAni = window.requestAnimationFrame(drawFrame, canvas);

                //速度计算
                //随着ball.x的增大， (targetX - ball.x)的值不断减小， 导致vx不打断减小
//                 var vx = (targetX - ball.x)*easing;
//                 var vy = (targetY - ball.y)*easing;

                var  vx = (mouse.x - ball.x)*easing; // 跟随鼠标移动
                var  vy = (mouse.y - ball.y)*easing; //跟随鼠标移动

                var vx2 =  (ball.x - ball2.x)*easing; // 跟随鼠标移动
                var vy2 =  (ball.y - ball2.y)*easing; // 跟随鼠标移动

                     ball.x += vx;
                     ball.y += vy;
                    
                    ball2.x += vx2;
                    ball2.y += vy2;


                
                var dx3 = targetX2 - ball3.x,  //目标位置减去小球的位置
                    ax3 = dx3 * spring;  //距离乘以弹性系数

                vx3 += ax3;
                var vx4= vx3;
                vx3 *= f;
//                 console.log(vx4,vx3)
                ball3.x += vx3;
                ball3.draw(context);

                    
                var dx5 = mouse.x - ball5.x,  //核心代码
                dy5 = mouse.y - ball5.y,
                ax5 = dx5 * spring,
                ay5 = dy5 * spring;

                vx5 += ax5;
                vy5 += ay5;
                vx5 *= friction;
                vy5 *= friction;
                ball5.x += vx5;
                ball5.y += vy5;
                ball5.draw(context);


                context.beginPath();
               context.strokeStyle = "#fff";
               context.moveTo(ball5.x, ball5.y);
               context.lineTo(mouse.x, mouse.y);
               context.stroke();
               context.closePath();
               context.restore();
               

                ball.draw(context);
                ball2.draw(context);

            }())

        }
    </script>
</body>
</html>
